<template>
    <div>
        <div class="flow">
            <group>
                <flow>
                    <template v-for="(st, idx) in states">
                        <template v-if="idx <= calAttr">
                            <flow-state :state="idx+1" :title="st | conver_state" is-done></flow-state>
                            <template v-if="calAttr === idx && idx + 1 <states.length">
                                    <flow-line tip="进行中"></flow-line>
                                </template>
                                <template v-else>
                                    <flow-line v-if="idx+1 < states.length" is-done></flow-line>
                                </template>
                            </template>
                            <template v-else>
                                <flow-state :state="idx+1" :title="st | conver_state"></flow-state>
                                <flow-line v-if="idx+1 < states.length"></flow-line>
                            </template>

                        </template>
                    </flow>
                </group>
            </div>
            <div class="price-detail">
                <group>
                    <card :header="{title: '测量明细'}">
                        <div slot="content">
                            <cell title="测量费">{{order.measure_amount_after_comment | money}}</cell>
                            <cell title="测量劳务费">{{order.service_measure_amount | money}}</cell>
                            <cell title="测量评分">
                                <rater v-model="order.measure_raty" :font-size="15" disabled></rater>
                            </cell>
                            <cell title="扣除的测量费">{{order.deduct_measure_cost | money}}</cell>
                            <cell title="测量人">{{order.customer_service_info.name}}</cell>
                        </div>
                    </card>
                </group>
                <group>
                    <card :header="{title: '安装明细'}">
                        <div slot="content">
                            <cell title="安装费">{{order.installed_amount_after_comment | money}}</cell>
                            <cell title="安装劳务费">{{order.service_installed_amount | money}}</cell>
                            <cell title="安装评分">
                                <rater v-model="order.installed_raty" :font-size="15" disabled></rater>
                            </cell>
                            <cell title="扣除的安装费">{{order.deduct_measure_cost | money}}</cell>
                            <cell title="安装人">{{order.service_info.name}}</cell>
                        </div>
                    </card>
                </group>
                <group>
                    <card :header="{title: '合计'}">
                        <div slot="content">
                            <cell title="合计(扣除平台服务费)">{{order.terminal_count | money}} </cell>
                            <cell title="合计(未扣除平台服务费)">{{order.amount_total_count | money}}</cell>
                        </div>
                    </card>
                </group>
            </div>
            <template v-if="order.order_events.length > 0">
                <group title="订单日志">
                    <x-table class="table-order">
                        <thead>
                            <tr>
                                <th>事由</th>
                                <th>操作时间</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr v-for="(evt, idx) in order.order_events">
                                <td>{{evt.title}}</td>
                                <td>{{evt.created_at | time}}</td>
                            </tr>
                        </tbody>
                    </x-table>
                </group>
            </template>
            <div class="order-pictures">
                <template v-if="measure_pictures.length > 0">
                    <group title="测量图纸">
                        <img class="measure_pictures" v-for="(pic, idx) in measure_pictures" :src="pic.src" width="80" @click="measure_show(idx)">
                        <div v-transfer-dom>
                            <previewer :list="measure_pictures" ref="previewer1" :options="options"></previewer>
                        </div>
                    </group>
                </template>
                <template v-if="completed_pictures.length > 0">
                    <group title="安装图">
                        <img class="completed_pictures" v-for="(pic, idx) in completed_pictures" :src="pic.src" width="80" @click="completed_show(idx)">
                        <div v-transfer-dom>
                            <previewer :list="completed_pictures" ref="previewer2" :options="options2"></previewer>
                        </div>
                    </group>
                </template>
            </div>
        </div>
    </template>
    <script>
        import {XTable, Flow, Rater, Group, dateFormat, Card, numberComma, Cell, FlowState, FlowLine, Previewer, TransferDom} from 'vux'
import {filter_state} from '../util.js'
export default {
    directives: {
        TransferDom
    },
    components: {
        XTable,
            Flow,
            Group,
            Cell,
            Flow,
            FlowState,
            FlowLine,
            Card,
            Previewer,
            Rater
    },
    data() {
        return {
            order: {
                order_events: [], 
                    service_info: {}, 
                    customer_service_info: {}, 
                    completed_pictures: [], 
                    comments: [], 
                    incidentals: [], 
                    measure_pictures: []
            },
            measure_pictures: [],
            completed_pictures: [],
            id: null,
            order_events: [],
            states: ["measured", "appointed_installation", "installed", "confirm_installed", "completed"],
            options: {
                getThumbBoundsFn (index) {
                    let thumbnail = document.querySelectorAll('.measure_pictures')[index]
                    let pageYScroll = window.pageYOffset || document.documentElement.scrollTop
                    let rect = thumbnail.getBoundingClientRect()
                    return {x: rect.left, y: rect.top + pageYScroll, w: rect.width}
                }
            },
            options2: {
                getThumbBoundsFn (index) {
                    let thumbnail = document.querySelectorAll('.completed_pictures')[index]
                    let pageYScroll = window.pageYOffset || document.documentElement.scrollTop
                    let rect = thumbnail.getBoundingClientRect()
                    return {x: rect.left, y: rect.top + pageYScroll, w: rect.width}
                }
            }

        }
    },
    computed: {
        calAttr() {
            return this.states.indexOf(this.order.workflow_state)
        }
    },
    filters: {
        money(val) {
            let n = numberComma(val / 100.0, 3)
            if (n && n > 0) {
                return parseFloat(n).toFixed(2)
            } else {
                return 0
            }
        },
            conver_state(val) {
                return filter_state(val)
            },
            time(val){
                return dateFormat(val * 1000, "YYYY-MM-DD HH:mm:ss")
            }
    },
    created(){
        this.$store.commit("storeState", false)

        this.id = this.$route.query.id
        this.fetch_order()
    },

    methods: {
        fetch_order() {
            this.$http.get("orders/" + this.id + ".json").then(res => {
                let data = res.data
                this.order = data.order
                let temp1 = conver_map(data.order.measure_pictures, "measure")
                let temp2 = conver_map(data.order.completed_pictures)
                this.measure_pictures = temp1
                this.completed_pictures = temp2
            })
        },
            measure_show(idx){
                this.$refs.previewer1.show(idx)
            },
            completed_show(idx){
                this.$refs.previewer2.show(idx)
            }

    }
}
function conver_map(args, type){
    let arr = []
    if (type === 'measure') {
        args.map((ops) => {
            ops.map((o) => {
                let  t = {}
                let [w, h] = getImg(o.image.url)
                t["src"] = o.image.url + "?imageView2/1/w/200/h/200"
                t["w"] = w ? w : 800
                t["h"] = h ? h : 800
                arr.push(t)
                return t
            })
        })
    } else {
        args.map((o) => {
            let  t = {}
            let [w, h] = getImg(o.image.url)
            t["src"] = o.image.url + "?imageView2/1/w/200/h/200"
            t["w"] = w ? w : 800
            t["h"] = h ? h : 800
            arr.push(t)
            return t
        })
    }
    return arr
}

function getImg(url) {
    let width = 0;
    let height = 0;
    let xmlHttp = new XMLHttpRequest();
    try {
        xmlHttp.open("GET", url + "?imageInfo", false);
        xmlHttp.send(null);
        let data = JSON.parse(xmlHttp.responseText);
        width = data["width"]
        height = data["height"]
    } catch(err) {
        width = 100;
        height = 100;
    }
    return [width, height]

}
function getSize(url) {
    var a = []
    var img = new Image()
    img.src = url
    return [img.width, img.height]
}
</script>
<style>
    .price-detail label{
        font-size: 14px;
    }
    .table-order {
        font-size: 12px;
    }
    .order-pictures img {
        padding: 4px;
    }
    .flow p {
        font-size: 9px;
    }
    .flow .weui-wepay-flow, .flow .weui-wepay-flow-auto {
        padding: 40px 15px;
    }
</style>
